<template>
  <div class="Shopping_goods_box">
    <!-- 商城商品 -->
    <el-row :gutter="20">
      <el-radio-group v-model="activeName" style="margin-bottom: 10px;">
        <el-radio-button label="first">全部</el-radio-button>
        <el-radio-button label="second">待审核</el-radio-button>
        <el-radio-button label="third">审核通过</el-radio-button>
        <el-radio-button label="fourth">审核未通过</el-radio-button>
      </el-radio-group>
    </el-row>
    <el-row :gutter="20">
      <el-col class="filterBox" :span="3">
        <p class="text">SPU编号</p>
        <el-input v-model="SPUnumber" placeholder="SPU编号"></el-input>
      </el-col>

      <el-col class="filterBox" :span="3">
        <p class="text">SPU标题</p>
        <el-input v-model="SPUheadline" placeholder="SPU标题"></el-input>
      </el-col>

      <el-col class="filterBox" :span="3">
        <p class="text">上架状态</p>

        <el-select v-model="putaway_value">
          <el-option
            v-for="item in putaway"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-col>

      <el-col class="filterBox" :span="3">
        <p class="text">是否虚拟商品</p>

        <el-select v-model="virtual_value">
          <el-option
            v-for="item in virtual"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-col>

      <el-col class="filterBox" :span="3">
        <p class="text">商品品牌</p>

        <el-select v-model="brand_value">
          <el-option
            v-for="item in brand"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-col>

      <el-col class="filterBox" :span="4">
        <p class="text">商品分类</p>

        <el-cascader
          placeholder="请选择分类"
          v-model="class_value"
          :options="commodity_class"
          @change="onhandleChange"
        ></el-cascader>
      </el-col>

      <el-col class="filterBox" :span="3">
        <el-button style="margin-top:25px" type="primary">
          <i class="el-icon-search"></i>
          搜索</el-button
        >
      </el-col>
    </el-row>

    <el-tabs v-model="activeName" @tab-click="handleClick">
      <!-- 全部 -->
      <el-tab-pane name="first">
        <!-- 添加商品按钮-->
        <el-row style="margin-bottom:20px" :gutter="10">
          <el-col :xs="10" :sm="8" :md="6" :lg="4" :xl="2">
            <div class="grid-content bg-purple">
              <el-button type="primary">
                <i class="el-icon-plus"></i>
                添加商品
              </el-button>
            </div>
          </el-col>
          <!-- 批量删除按钮 -->
          <el-col :xs="10" :sm="8" :md="6" :lg="4" :xl="2">
            <div class="grid-content bg-purple">
              <el-button type="danger">
                <i class="el-icon-delete"></i>
                批量删除
              </el-button>
            </div>
          </el-col>
          <!-- 批量上下架按钮 -->
          <el-col
            :xs="10"
            :sm="8"
            :md="6"
            :lg="4"
            :xl="2"
            style="margin-right:10px"
          >
            <el-dropdown @command="onbatch">
              <div class="grid-content bg-purple">
                <el-button type="primary">
                  批量上下架<i class="el-icon-arrow-down el-icon--right"></i>
                </el-button>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="批量上架"
                    >批量上架</el-dropdown-item
                  >
                  <el-dropdown-item command="批量下架"
                    >批量下架</el-dropdown-item
                  >
                </el-dropdown-menu>
              </div>
            </el-dropdown>
          </el-col>
          <!-- 导出商品按钮 -->
          <el-col :xs="10" :sm="8" :md="6" :lg="4" :xl="2">
            <el-dropdown @command="derive">
              <div class="grid-content bg-purple">
                <el-button type="primary">
                  导出商品<i class="el-icon-arrow-down el-icon--right"></i>
                </el-button>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="导出所有"
                    >导出所有</el-dropdown-item
                  >
                  <el-dropdown-item command="导出所有"
                    >导出选中</el-dropdown-item
                  >
                </el-dropdown-menu>
              </div>
            </el-dropdown>
          </el-col>
        </el-row>

        <!-- 表单 -->

        <el-table
          ref="multipleTable"
          v-loading="loading"
          element-loading-text="拼命加载中"
          border
          :data="tableData"
          style="width:100%"
          @selection-change="handleSelectionChange"
        >
          <!-- 复选框 -->
          <el-table-column type="selection" :selectable="selectable" width="55">
          </el-table-column>
          <!-- 图片 -->
          <el-table-column label="SUP图片" width="100">
            <template slot-scope="scope">
              <el-image
                style="width: 60px; height: 60px"
                :src="scope.row.url"
                fit="cover"
              ></el-image>
            </template>
          </el-table-column>
          <!-- 标题 -->
          <el-table-column prop="address" label="SUP标题" width="500">
          </el-table-column>
          <!-- 虚拟标签 -->
          <el-table-column label="虚拟商品" width="80">
            <template slot-scope="scope">
              <el-tag
                :type="scope.row.province === '是' ? 'success' : 'info'"
                disable-transitions
                >{{ scope.row.province }}</el-tag
              >
            </template>
          </el-table-column>
          <!-- 上下架状态 -->
          <el-table-column label="上下架状态" width="100">
            <template slot-scope="scope">
              <el-tag
                :type="scope.row.province === '是' ? 'success' : 'info'"
                disable-transitions
                >{{ scope.row.province }}</el-tag
              >
            </template>
          </el-table-column>

          <!-- 审核状态 -->
          <el-table-column label="审核状态" width="100">
            <template slot-scope="scope">
              <el-tag
                :type="scope.row.zip === true ? 'success' : 'info'"
                disable-transitions
                >{{ scope.row.zip ? "审核通过" : "审核不通过" }}</el-tag
              >
            </template>
          </el-table-column>

          <!-- 销售价格 -->
          <el-table-column prop="jiaqian" label="销售价格" width="160">
          </el-table-column>

          <!-- 品牌 -->
          <el-table-column prop="pin" label="品牌" width="180">
          </el-table-column>
          <!-- 操作 -->
          <el-table-column label="操作" >
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="success"
                @click="checklook(scope.$index, scope.row)"
                >查看</el-button
              >
              <el-button
                size="mini"
                type="primary"
                @click="handleEdit(scope.$index, scope.row)"
                >编辑</el-button
              >
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <div class="block">
          <span class="demonstration"></span>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage"
            :page-sizes="[10, 20, 30]"
            :page-size="pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="400"
          >
          </el-pagination>
        </div>
      </el-tab-pane>
      <!-- 待审核 -->
      <el-tab-pane name="second">
        <el-row style="margin-bottom:20px" :gutter="10">
          <!-- 批量删除按钮 -->
          <el-col :xs="10" :sm="8" :md="6" :lg="4" :xl="2">
            <div class="grid-content bg-purple">
              <el-button type="danger">
                <i class="el-icon-delete"></i>
                批量删除
              </el-button>
            </div>
          </el-col>
          <!-- 批量上下架按钮 -->
          <el-col
            :xs="10"
            :sm="8"
            :md="6"
            :lg="4"
            :xl="2"
            style="margin-right:10px"
          >
            <el-dropdown @command="onbatch">
              <div class="grid-content bg-purple">
                <el-button type="primary">
                  批量上下架<i class="el-icon-arrow-down el-icon--right"></i>
                </el-button>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="批量上架"
                    >批量上架</el-dropdown-item
                  >
                  <el-dropdown-item command="批量下架"
                    >批量下架</el-dropdown-item
                  >
                </el-dropdown-menu>
              </div>
            </el-dropdown>
          </el-col>
        </el-row>

        <!-- 表单 -->

        <el-table
          ref="multipleTable"
          v-loading="loading"
          element-loading-text="拼命加载中"
          border
          :data="unreviewedData"
          style="width:87.2%"
        >
          <!-- 复选框 -->
          <el-table-column type="selection" :selectable="selectable" width="55">
          </el-table-column>
          <!-- 图片 -->
          <el-table-column label="SUP图片" width="100">
            <template slot-scope="scope">
              <el-image
                style="width: 60px; height: 60px"
                :src="scope.row.url"
                fit="cover"
              ></el-image>
            </template>
          </el-table-column>
          <!-- 标题 -->
          <el-table-column prop="address" label="SUP标题" width="500">
          </el-table-column>
          <!-- 虚拟标签 -->
          <el-table-column label="虚拟商品" width="80">
            <template slot-scope="scope">
              <el-tag
                :type="scope.row.province === '是' ? 'success' : 'info'"
                disable-transitions
                >{{ scope.row.province }}</el-tag
              >
            </template>
          </el-table-column>
          <!-- 上下架状态 -->
          <el-table-column label="上下架状态" width="100">
            <template slot-scope="scope">
              <el-tag
                :type="scope.row.province === '是' ? 'success' : 'info'"
                disable-transitions
                >{{ scope.row.province }}</el-tag
              >
            </template>
          </el-table-column>

          <!-- 审核状态 -->
          <el-table-column label="审核状态" width="100">
            <template slot-scope="scope">
              <el-tag
                :type="scope.row.zip === true ? 'success' : 'info'"
                disable-transitions
                >{{ scope.row.zip ? "审核通过" : "审核不通过" }}</el-tag
              >
            </template>
          </el-table-column>

          <!-- 销售价格 -->
          <el-table-column prop="jiaqian" label="销售价格" width="160">
          </el-table-column>

          <!-- 品牌 -->
          <el-table-column prop="pin" label="品牌" width="180">
          </el-table-column>
          <!-- 操作 -->
          <el-table-column label="操作" width="220">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="success"
                @click="checklook(scope.$index, scope.row)"
                >查看</el-button
              >
              <el-button
                size="mini"
                type="primary"
                @click="handleEdit(scope.$index, scope.row)"
                >编辑</el-button
              >
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <div class="block">
          <span class="demonstration"></span>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="400"
          >
          </el-pagination>
        </div>
      </el-tab-pane>
      <!-- 审核通过 -->
      <el-tab-pane name="third">
        <el-row style="margin-bottom:20px" :gutter="10">
          <!-- 批量删除按钮 -->
          <el-col :xs="10" :sm="8" :md="6" :lg="4" :xl="2">
            <div class="grid-content bg-purple">
              <el-button type="danger">
                <i class="el-icon-delete"></i>
                批量删除
              </el-button>
            </div>
          </el-col>
          <!-- 批量上下架按钮 -->
          <el-col
            :xs="10"
            :sm="8"
            :md="6"
            :lg="4"
            :xl="2"
            style="margin-right:10px"
          >
            <el-dropdown @command="onbatch">
              <div class="grid-content bg-purple">
                <el-button type="primary">
                  批量上下架<i class="el-icon-arrow-down el-icon--right"></i>
                </el-button>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="批量上架"
                    >批量上架</el-dropdown-item
                  >
                  <el-dropdown-item command="批量下架"
                    >批量下架</el-dropdown-item
                  >
                </el-dropdown-menu>
              </div>
            </el-dropdown>
          </el-col>
        </el-row>

        <!-- 表单 -->

        <el-table
          ref="multipleTable"
          v-loading="loading"
          element-loading-text="拼命加载中"
          border
          :data="auditData"
          style="width: 100%"
        >
          <!-- 复选框 -->
          <el-table-column type="selection" :selectable="selectable" width="55">
          </el-table-column>
          <!-- 图片 -->
          <el-table-column label="SUP图片" width="100">
            <template slot-scope="scope">
              <el-image
                style="width: 60px; height: 60px"
                :src="scope.row.url"
                fit="cover"
              ></el-image>
            </template>
          </el-table-column>
          <!-- 标题 -->
          <el-table-column prop="address" label="SUP标题" width="500">
          </el-table-column>
          <!-- 虚拟标签 -->
          <el-table-column label="虚拟商品" width="80">
            <template slot-scope="scope">
              <el-tag
                :type="scope.row.province === '是' ? 'success' : 'info'"
                disable-transitions
                >{{ scope.row.province }}</el-tag
              >
            </template>
          </el-table-column>
          <!-- 上下架状态 -->
          <el-table-column label="上下架状态" width="100">
            <template slot-scope="scope">
              <el-tag
                :type="scope.row.province === '是' ? 'success' : 'info'"
                disable-transitions
                >{{ scope.row.province }}</el-tag
              >
            </template>
          </el-table-column>

          <!-- 审核状态 -->
          <el-table-column label="审核状态" width="100">
            <template slot-scope="scope">
              <el-tag
                :type="scope.row.zip === true ? 'success' : 'info'"
                disable-transitions
                >{{ scope.row.zip ? "审核通过" : "审核不通过" }}</el-tag
              >
            </template>
          </el-table-column>

          <!-- 销售价格 -->
          <el-table-column prop="jiaqian" label="销售价格" width="160">
          </el-table-column>

          <!-- 品牌 -->
          <el-table-column prop="pin" label="品牌" width="100">
          </el-table-column>
          <el-table-column label="操作">
            <!-- 操作 -->
            <template slot-scope="scope" >
              <el-button
                size="mini"
                type="success"
                @click="checklook(scope.$index, scope.row)"
                >查看</el-button
              >
              <el-button
                size="mini"
                type="primary"
                @click="handleEdit(scope.$index, scope.row)"
                >编辑</el-button
              >
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <div class="block">
          <span class="demonstration"></span>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="20"
          >
          </el-pagination>
        </div>
      </el-tab-pane>
      <el-tab-pane name="fourth">定时任务补偿</el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  name: "",
  props: [""],
  data() {
    return {
      activeName: "first",
      SPUnumber: "",
      SPUheadline: "",
      putaway: [
        {
          value: "全部",
          label: "全部",
        },
        {
          value: "上架",
          label: "上架",
        },
        {
          value: "下架",
          label: "下架",
        },
        {
          value: "违规下架",
          label: "违规下架",
        },
      ],
      putaway_value: "全部",
      virtual: [
        {
          value: "全部",
          label: "全部",
        },
        {
          value: "是",
          label: "是",
        },
        {
          value: "否",
          label: "否",
        },
      ],
      virtual_value: "全部",
      brand: [
        {
          value: "全部",
          label: "全部",
        },
        {
          value: "小米",
          label: "小米",
        },
        {
          value: "苹果",
          label: "苹果",
        },
        {
          value: "美图",
          label: "美图",
        },
        {
          value: "三星",
          label: "三星",
        },
      ],
      brand_value: "全部",
      commodity_class: [
        {
          value: "zhinan",
          label: "指南",
          children: [
            {
              value: "shejiyuanze",
              label: "设计原则",
              children: [
                {
                  value: "yizhi",
                  label: "一致",
                },
                {
                  value: "fankui",
                  label: "反馈",
                },
              ],
            },
            {
              value: "daohang",
              label: "导航",
              children: [
                {
                  value: "cexiangdaohang",
                  label: "侧向导航",
                },
                {
                  value: "dingbudaohang",
                  label: "顶部导航",
                },
              ],
            },
          ],
        },
        {
          value: "zujian",
          label: "组件",
          children: [
            {
              value: "basic",
              label: "Basic",
              children: [
                {
                  value: "layout",
                  label: "Layout 布局",
                },
                {
                  value: "color",
                  label: "Color 色彩",
                },
              ],
            },
            {
              value: "form",
              label: "Form",
              children: [
                {
                  value: "radio",
                  label: "Radio 单选框",
                },
              ],
            },
          ],
        },
        {
          value: "ziyuan",
          label: "资源",
          children: [
            {
              value: "axure",
              label: "Axure Components",
            },
          ],
        },
      ],
      class_value: "",

      // 表单数据
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          province: "是",
          city: "普陀区",
          address:
            "【直降100限量抢券再减100】Meitu 美图M8s 4GB+64GB 芭比粉 自拍美颜女性拍照 移动联通电信4G手机",
          zip: false,
          zhuangtai: "上架",
          shenhe: "审核通过",
          jiaqian: 999,
          pin: "小米",
          url:
            "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address:
            "【直降100限量抢券再减100】Meitu 美图M8s 4GB+64GB 芭比粉 自拍美颜女性拍照 移动联通电信4G手机",
          zip: true,
          zhuangtai: "上架",
          shenhe: "审核通过",
          jiaqian: 999,
          pin: "小米",
          url:
            "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address:
            "【直降100限量抢券再减100】Meitu 美图M8s 4GB+64GB 芭比粉 自拍美颜女性拍照 移动联通电信4G手机",
          zip: true,
          zhuangtai: "上架",
          shenhe: "审核通过",
          jiaqian: 999,
          pin: "小米",
          url:
            "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address:
            "【直降100限量抢券再减100】Meitu 美图M8s 4GB+64GB 芭比粉 自拍美颜女性拍照 移动联通电信4G手机",
          zip: true,
          zhuangtai: "上架",
          shenhe: "审核通过",
          jiaqian: 999,
          pin: "小米",
          url:
            "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
        },
      ],
      loading: false,
      // 分页
      currentPage: 1, //默认当前页为第一页
      pagesize: 5, //每页多少数据
      // 单选框选中的哪一行
      multipleSelection:'',
      // 未审核的数据
      unreviewedData: [],
      // 审核通过的数据
      auditData: [],
    };
  },

  components: {},

  computed: {},

  beforeMount() {},

  mounted() {},

  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    // 商品分类的结果
    onhandleChange(value) {
      console.log(value);
    },
    // 批量上下架按钮
    onbatch(command) {
      console.log(command);
    },
    // 导出数据
    derive(command) {
      console.log(command);
    },
    // 表达数据中的单选框
    selectable(row, index) {
      if (index === index) {
        return true;
      } else {
        return false;
      }
      // console.log(row,1111);
      // console.log(index,222);
    },
    // 查看表单
    checklook(index, row) {
      console.log(index, row);
    },
    // 表单中编辑按钮
    handleEdit(index, row) {
      console.log(index, row);
    },
    // 表单中删除按钮
    handleDelete(index, row) {
      console.log(index, row);
    },
    //单选框选中的哪一项
    handleSelectionChange(val) {
      // console.log(val);
      this.multipleSelection = val;
    },

    // 分页功能
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
  },

  watch: {},
};
</script>
<style lang="scss" scoped>
.Shopping_goods_box {
  // height: 100%;
  // width: 100%;
  padding: 20px;
}
.filterBox {
  padding-right: 0px !important;
  padding-left: 5px !important;
  padding-bottom: 20px !important;
  .text {
    font-size: 13px;
    color: #8492a6;
    margin-bottom: 10px;
  }
}
</style>
